<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
            /*初始化页面*/
        }

        body {
            background: url(./imgs/01.jpg) no-repeat;
            /*引入背景图片*/
            background-size: cover;
            /*背景平铺*/
        }

        .box {
            width: 350px;
            height: 250px;
            position: absolute;
            /*绝对定位*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /*上面三条移动body元素*/
            text-align: center;
            /*文本居中*/
            background: rgba(77, 80, 82, 0.85);
            /**/
            border-radius: 4%;
        }

        h1,
        .upper,
        .below {
            margin-top: 25px;
        }

        h1,
        input,
        button {
            color: white;
        }

        .upper,
        .below,
        button {
            cursor: pointer;
            /*鼠标变小手*/
        }

        @font-face {
            /*阿里图标*/
            font-family: 'iconfont';
            src: url('iconfont.eot');
            src: url('iconfont.eot?#iefix') format('embedded-opentype'),
                url('iconfont.woff2') format('woff2'),
                url('iconfont.woff') format('woff'),
                url('iconfont.ttf') format('truetype'),
                url('iconfont.svg#iconfont') format('svg');
        }

        .box .iconfont {
            /*阿里图标*/
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-size: 2em;
            color: #fff;
            vertical-align: middle;
        }

        .box .upper i::before {
            /*添加伪元素并设置样式*/
            overflow: hidden;
            position: absolute;
            height: 0;
            color: skyblue;
            content: "\e66b";
            border-bottom: 2px solid skyblue;
            transition: 0.3s;
        }

        .box .upper i:hover::before {
            /*鼠标悬浮显示伪元素样式*/
            height: 32px;
            transition: 0.3s;
        }

        .box .below i::before {
            overflow: hidden;
            position: absolute;
            height: 0;
            color: pink;
            content: "\e605";
            border-bottom: 2px solid pink;
            transition: 0.3s;
        }

        .box .below i:hover::before {
            height: 32px;
            transition: 0.3s;
        }


        .box input {
            /*设置输入框样式*/
            width: 130px;
            height: 20px;
            line-height: 20px;
            font-size: 15px;
            border: 0;
            border-bottom: 2px solid #ccc;
            outline: none;
            background: transparent;
            padding: 5px 10px;
        }

        input::-webkit-input-placeholder {
            /*设置输入框默认字体颜色*/
            color: #fff;
        }

        .box button {
            /*设置按钮样式*/
            width: 200px;
            height: 30px;
            transform: translateY(65%);
            font-size: 18px;
            letter-spacing: 5px;
            border: 0;
            border-radius: 30px;
            outline: none;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4,
                    #f441a5, #ffeb3b, #03a9f4);
            /*设置背景颜色 左右渐变*/
            background-size: 400%;
            /*背景大小*/
            transition: 0.2s;
        }

        .box button::before {
            /*添加伪元素*/
            content: '';
            /*伪元素内容*/
            position: absolute;
            /*绝对定位*/
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /*伪元素居中*/
            z-index: -1;
            background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4,
                    #f441a5, #ffeb3b, #03a9f4);
            background-size: 400%;
            filter: blur(20px);
            /*过渡：模糊*/
            opacity: 0;
            /*透明度*/
            transition: 0.2s;
            /*过渡时间*/
        }

        .box button:hover {
            width: 210px;
            height: 33px;
            font-size: 20px;
            transition: 0.2s;
            animation: animate 8s linear infinite;
            /*动画: 名称 时间 线性 循环*/
        }

        @keyframes animate {

            /*设置动画*/
            0% {
                background-position: 0%;
                /*修改背景定位，实现渐变色炫光*/
            }

            50% {
                background-position: 100%;
            }

            100% {
                background-position: 0%;
            }
        }

        .box button:hover::before {
            filter: blur(20px);
            opacity: 1;
            transition: 0.2s;
            animation: animate 8s linear infinite;
            /*注意动画名称统一*/
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>Login</h1>
        <div class="upper">
            <i class="iconfont">&#xe66b;</i>
            <input type="text" placeholder="Username">
        </div>
        <div class="below">
            <i class="iconfont">&#xe605;</i>
            <input type="password" placeholder="Password">
        </div>
        <button>登录</button>
    </div>

</body>

<script>
    let btn = document.querySelector("button")
    btn.onclick = function (){
        alert("笨蛋，真以为能登录吗")
    }
</script>

</html>